<template>
  <view>
    <!-- 1.0 tabs 组件 -->
    <u-tabs
      :list="tabs"
      :is-scroll="false"
      :current="current"
      inactive-color="#666"
      active-color="#eb4450"
      @change="onTapsChange"
    ></u-tabs>
    <!-- 2.0  -->
    <view class="list">
      <view class="item" v-for="item in orders" :key="item.order_id">
        <view class="item_row">
          <text class="item_row_left">订单编号</text>
          <text class="item_row_right">{{ item.order_number }}</text>
        </view>
        <view class="item_row">
          <text class="item_row_left">订单金额</text>
          <text class="item_row_right price">{{ item.order_price }}</text>
        </view>
        <view class="item_row">
          <text class="item_row_left">订单日期</text>
          <text class="item_row_right">{{ item.update_time_format }}</text>
        </view>
        <view class="item_row">
          <text class="item_row_left">支付状态</text>
          <text class="item_row_right">{{
            item.pay_status === "1" ? "已付款" : "未付款"
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 添加 type 参数，用于切换选项卡的时候获取不同的列表数据
      tabs: [
        { name: "全部", type: 1 },
        { name: "待付款", type: 2 },
        { name: "待发货", type: 3 },
      ],
      current: 0,
      orders: [],
      type: 1,
    };
  },
  onLoad({current,type}) {
    // console.log(e)
    // console.log(current,type)
    // 没有传递参数，就设置默认值
    this.current = current || 0
    this.type = type || 1
    //根据参数请求
    this.getOrderList()
  },
  methods: {
    onTapsChange(index) {
      this.current = index;
      // 根据索引值获取对应 type 参数
      this.type = this.tabs[index].type;
      // 重新获取列表数据
      this.getOrderList();
    },
    async getOrderList() {
      const {
        message: { orders },
      } = await this.$u.api.getOrderList({ type: this.type});
      this.orders = orders.map((item) => ({
        ...item,
        // 利用原生日期对象自带的格式化方法
        update_time_format: new Date(item.update_time * 1000).toLocaleString(),
      }));
    },
  },
};
</script>

<style lang="scss">
.list {
  .item {
    padding: 20rpx;
    border-top: 5px solid #f4f4f4;
    .item_row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      .item_row_left {
        color: #666;
      }

      .item_row_right {
      }
    }
  }
}
</style>